import React from 'react';
import {Button, Divider, Form, LocaleProvider, Table} from "antd/lib/index";
import request, {gatewayPost} from "../../../util/requestUtil";
import zh_CN from "antd/lib/locale-provider/zh_CN";
import UserAdd from './UserAdd';
import UserModify from './UserModify';
import post from "../../../util/requestUtil";

//@Form.create()
class UserList extends React.Component {

    state = {
        expand: false,
        modalVisible: false,
        createModalVisible: false,
        buttonDisabled: true,
        selectedChannelId: '',
        selectedRowKeys: [],
        params: {
            pageNo: 1,
            pageSize: 10
        }
    };

    onSelectChange = selectedRowKeys => {
        this.setState({selectedRowKeys});
        if (selectedRowKeys.length > 0) {
            this.setState({buttonDisabled: false})
        } else {
            this.setState({buttonDisabled: true})
        }
    };

    columns = [
        {
            title: '用户名',
            dataIndex: 'name',
            width: '10%',
            align:'center'
        },
        {
            title: '用户性别',
            dataIndex: 'sex',
            width: '10%',
            align:'center'
        },
        {
            title: '教师号 / 学号',
            dataIndex: 'sno',
            width: '10%',
            align:'center',
            render(sno,item) {
                return <div>{sno +'  '+item.tno}</div>;
            }
        },
        {
            title: '电话',
            dataIndex: 'phone',
            width: '10%',
            align:'center'
        },
        {
            title: '邮箱',
            dataIndex: 'email',
            width: '10%',
            align:'center'
        },
        {
            title: '状态',
            dataIndex: 'status',
            width: '10%',
            align:'center',
            render(val) {
                return <div>{val === 1 ? '启用' : '禁用'}</div>;
            }
        },
        {
            title: '操作',
            width: '15%',
            align:'center',
            render: (text, record) => (

                <div>
                    <Divider type="vertical"/>
                    <a onClick={() => this.modify(record.id)}>修改</a>
                    <Divider type="vertical"/>

                    <Divider type="vertical"/>
                    <a onClick={() => this.modifyStatus(record.id, record.status)}>{record.status === 1 ? '禁用' : '启用'}</a>
                    <Divider type="vertical"/>
                </div>
            ),
        },
    ];

    modify = (id) => {
        this.setState({
            modalVisible: true,
            selectedChannelId: id
        })
    }

    modifyStatus = (id, status) => {
        const parm = [id,];
        if (status === 1) {
            gatewayPost("/sms/channel/disableChannel", parm).then(res => {
                this.query(this.state.params.pageNo, 10);
            })
        } else {
            gatewayPost("/sms/channel/enableChannel", parm).then(res => {
                this.query(this.state.params.pageNo, 10);
            })
        }
    }
    create = () => {
        this.setState({
            createModalVisible: true,
        })
    }

    handleEditModal = () => {
        this.setState({
            modalVisible: false,
        })
        const {params} = this.state;
        this.query(1, 10, params);
    }


    handleCreateModal = () => {
        this.setState({
            createModalVisible: false,
        })
        const {params} = this.state;
        this.query(1, 10, params);
    }

    componentDidMount() {
        this.query(1, 10);
        // let param = {'dictNames': ['business_type','sms_template_status','send_type','triger_condition']};
        // this.queryDictMap(param)
    }

    queryDictMap = (keys) => {
        gatewayPost('/web/dict/query/map', keys).then(res => {
            if (res) {
                this.setState({
                    dict: res
                })
            }
        })
    }
    query = (pageNo, pageSize, conditions) => {
        const params = {
            ...this.state.params,
            pageNo: pageNo,
            pageSize: pageSize,
            ...conditions
        }
        this.setState({
            params: params,
            loading: true,
        });

        post('/userApi/users/list', params).then(res => {
            this.setState({loading: false})
            if (res) {
                this.setState({
                    list: res.data,
                    total: res.totalCount,
                }, () => {
                    console.log(res);
                });
            }
        })

    }

    handleTableChange = (pagination, filters, sorter) => {
        this.setState(
            pagination
        );
        this.state.params.pageNo = pagination.current;
        this.state.params.pageSize = pagination.pageSize;
        this.query(pagination.current, pagination.pageSize, this.state.params)
    };

    handleIsDelay = (isDelay) => {
        if (isDelay === 1) {
            this.setState({
                isDelay: "block"
            })
        } else {
            this.setState({
                isDelay: "none"
            })
        }

    }

    render() {
        const {selectedRowKeys} = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
            hideDefaultSelections: true,
        };

        const {modalVisible, createModalVisible, selectedChannelId} = this.state;
        return (
            <div>
                <LocaleProvider locale={zh_CN}>
                    <div style={{
                        display: 'flex',
                        'justify-content': 'flex-end',
                        marginRight:'10px'
                    }}
                         className="ant-advanced-search_button">
                        <Button icon="plus" type={'primary'} style={{marginLeft: 8}} onClick={this.create}>
                            添加用户
                        </Button>
                    </div>
                    <div className="search-result-list" style={{marginTop: "18px"}} >
                        <Table
                            columns={this.columns}
                            dataSource={this.state.list}
                            bordered={true}
                            pagination={{
                                current: this.state.params.pageNo,
                                total: this.state.total,
                                hideOnSinglePage:true
                            }}
                            onChange={this.handleTableChange}
                        />
                    </div>
                   <UserModify modalVisible={modalVisible} handleEditModal={this.handleEditModal}
                                           selectedChannelId={selectedChannelId}/>

                    <UserAdd modalVisible={createModalVisible}
                                        handleCreateModal={this.handleCreateModal}/>
                </LocaleProvider>
            </div>
        );
    }
}

export default UserList;
